function slider(opts) {
    this.config = {
        wrap: '',
        sliderTime: '3000',
        sliderArrs: '',
        totalLen: 0,
        first: 0,
        last: 0,
        interValFc: '',
        isHwText: false,
        reg: 0
    }
    this.init(opts)
}
slider.prototype = {
    init: function(opts) {
        this.config = $.extend(this.config, opts || {})
        let self = this,
            _config = self.config
        _config.totalLen = _config.sliderArrs.length
        $(_config.wrap).each((index, item) => {
            self._renderHtml(item)
            self._bindFc(item)
        })
    },
    _renderHtml: function(wrap) {
        let self = this,
            _config = self.config,
            sliderWrap = $(`<div class='slider-block'></div>`),
            picWrap = $(`<div class="slider-picWrap"></div>`),
            navWrap = $(`<div class="slider-nav"></div>`),
            sliderUl = $(`<ul class="slider-ul"></ul>`),
            sliderBarUl = $(`<ul class="slider-navBar"></ul>`)
        $(picWrap).append($(sliderUl))
        $(navWrap).append($(sliderBarUl))
        $(sliderWrap).append($(picWrap))
        $(sliderWrap).append($(navWrap))
        $(wrap).append($(sliderWrap))
        $(_config.sliderArrs).each((index, item) => {
            let sliderLi = $(`<li class='slider-picLi'></li>`)
                // let sliderIframe = $(`<iframe src='${item.picture_path}' style="width:620px; margin:0 auto; height:320px;display:block;box-sizing:border-box; padding:0px 10px;border: 0px;overflow: hidden;"></iframe>`)
            let sliderImg = $(`<img src='${item.picture_path}'/>`)
                //http://192.168.1.184:8083/pages/main_page/demo.html
            let sliderBarLi

            if (index === 0) {
                sliderBarLi = $(`<li class="slider-barLi"></li>`)
            } else {
                sliderBarLi = $(`<li class="slider-barLi"></li>`)
            }
            if (_config.isHwText) {
                $(sliderLi).append($(self._renderHwText(item)))
            }
            $(sliderLi).append($(sliderImg))
            $(sliderBarUl).append($(sliderBarLi))
            $(sliderUl).append($(sliderLi))
        })
    },
    _setInterval: function() {
        let self = this,
            _config = self.config
        _config.reg = 1
        _config.interValFc = setInterval(function() {
            _config.first = _config.first + 1 >= _config.totalLen ? _config.first + 1 - _config.totalLen : _config.first + 1
            self._default();
        }, _config.sliderTime)
    },
    _clearInterval: function() {
        let self = this,
            _config = self.config
        _config.reg = 0
        clearInterval(_config.interValFc)

    },
    _bindFc: function(wrap) {

        let self = this,
            _config = self.config,
            picLi = $(`${_config.wrap} .slider-picLi`),
            barLi = $(`${_config.wrap} .slider-barLi`)

        picLi.eq(_config.first).css('display', 'block')
        barLi.eq(_config.first).addClass('active')
        $(wrap).unbind('mouseenter')
        $(wrap).unbind('mouseleave')

        $(wrap).bind('mouseenter', function() {
            self._clearInterval()
        })
        $(wrap).bind('mouseleave', function() {
            if (_config.reg === 0) {
                self._setInterval()
            }
        })
        barLi.unbind('click')
        barLi.bind('click', function(i) {
            if (_config.first === barLi.index($(this))) {

            } else {
                _config.first = barLi.index($(this))

                self._default()
            }

        })
        if (_config.reg === 0) {
            self._setInterval()
        }


    },
    _default: function() {
        let self = this,
            _config = self.config,
            picLi = $(`${_config.wrap} .slider-picLi`),
            barLi = $(`${_config.wrap} .slider-barLi`)
        picLi.eq([_config.first]).css('display', 'block')
        barLi.eq([_config.first]).addClass('active')
        picLi.eq([_config.last]).css('display', 'none')
        barLi.eq([_config.last]).removeClass('active')

        _config.last = _config.first
    },
    _renderHwText: (item) => {
        let sliderText, sliderTitle, sliderTextUrl
        sliderText = `<div class='slider-text'>${item.carousel_content}</div>`
        sliderTitle = `<div class='slider-title'>${item.carousel_name}</div>`
        sliderTextUrl = `<a target='_blank' class='slider-title-url' href='${item.button_url}'>${item.button_name}</a>`
        return `<div class='slider-text-box'>` + sliderTitle + sliderText + sliderTextUrl + `</div>`
    }
}